<template>
  <div class="_mbbox boxgap">
    <div
      style="
        display: flex;
        gap: 12px;
        flex-direction: row;
        flex-wrap: nowrap;
        min-height: 500px;
      "
    >
      <div class="nbox1 bg5" style="min-width: 200px">
        <n-button @click="set.ck('get_dxtj')">获取刀型排名/统计</n-button>
        <n-button @click="set.ck('get_roletj')">获取角色使用率统计</n-button>
        <n-button @click="set.ck('rinbot_cd')">获取公会人员出刀图片</n-button>
      </div>
      <div class="nbox2 bg5" style="flex: 1">
        <div v-if="cfg.route.params.type == 'get_dxtj'">
          <!---->
          <n-h3 style="margin-top: 0">一、获取刀型列表统计</n-h3>
          <n-h3> 请求地址（GET）</n-h3>
          <div class="nbox1">
            <div>{{ cfg.api }}api/tj?type=get_dxranking</div>
          </div>
          <n-h3> 请求参数</n-h3>
          <div class="nbox1">
            <n-grid y-gap="0" :cols="4">
              <n-gi>
                <div style="text-align: center">属性</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">类型</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">必填</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">说明</div>
              </n-gi>
              <!-- -->
              <n-gi> type </n-gi>
              <n-gi> String </n-gi>
              <n-gi> 必填 </n-gi>
              <n-gi> </n-gi>
              <!-- -->
              <n-gi> season </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>赛季ID 默认最新赛季</n-gi>
              <!-- -->
              <n-gi> boss </n-gi>
              <n-gi> String</n-gi>
              <n-gi>否</n-gi>
              <n-gi>筛选首领名称，默认无筛选</n-gi>
              <!-- -->
              <n-gi> zk </n-gi>
              <n-gi> String</n-gi>
              <n-gi>否</n-gi>
              <n-gi>筛选主控，默认无筛选<br />例：idol_captain_myth.png</n-gi>
              <!-- -->
              <n-gi> page </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>分页 默认1</n-gi>
              <!-- -->
              <n-gi> limit </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>每页数量 默认32 最大100</n-gi>
            </n-grid>
          </div>
          <n-h3>二、获取刀型队伍排名统计</n-h3>
          <n-h3> 请求地址（GET）</n-h3>
          <div class="nbox1">
            <div>{{ cfg.api }}api/tj?type=get_dxtop</div>
          </div>
          <n-h3> 请求参数</n-h3>
          <div class="nbox1">
            <n-grid y-gap="0" :cols="4">
              <n-gi>
                <div style="text-align: center">属性</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">类型</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">必填</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">说明</div>
              </n-gi>
              <!-- -->
              <n-gi> type </n-gi>
              <n-gi> String </n-gi>
              <n-gi> 必填 </n-gi>
              <n-gi> </n-gi>
              <!-- -->
              <n-gi> season </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>赛季ID 默认最新赛季</n-gi>
              <!-- -->
              <n-gi> boss_name </n-gi>
              <n-gi> String</n-gi>
              <n-gi>必填</n-gi>
              <n-gi>首领名称</n-gi>
              <!-- -->
              <n-gi> user_name </n-gi>
              <n-gi> String</n-gi>
              <n-gi>否</n-gi>
              <n-gi>筛选人员名称</n-gi>

              <!-- -->
              <n-gi> icon </n-gi>
              <n-gi> String</n-gi>
              <n-gi>必填</n-gi>
              <n-gi>队伍图标字符串<br />A.png,B.png,C.png,D.png</n-gi>
              >
              <!-- -->
              <n-gi> page </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>分页 默认1</n-gi>
              <!-- -->
              <n-gi> limit </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>每页数量 默认52 最大100</n-gi>
            </n-grid>
          </div>
        </div>
        <div v-else-if="cfg.route.params.type == 'get_roletj'">
          <n-h3 style="margin-top: 0">一、获取角色使用率统计</n-h3>
          <n-h3> 请求地址（GET）</n-h3>
          <div class="nbox1">
            <div>{{ cfg.api }}api/tj?type=get_roletj</div>
          </div>
          <n-h3> 请求参数</n-h3>
          <div class="nbox1">
            <n-grid y-gap="0" :cols="4">
              <n-gi>
                <div style="text-align: center">属性</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">类型</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">必填</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">说明</div>
              </n-gi>
              <!-- -->
              <n-gi> type </n-gi>
              <n-gi> String </n-gi>
              <n-gi> 必填 </n-gi>
              <n-gi> </n-gi>
              <!-- -->
              <n-gi> season </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>赛季ID 默认最新赛季</n-gi>
            </n-grid>
          </div>
          <n-h3>二、获取角色相关队伍使用率统计</n-h3>
          <n-h3> 请求地址（GET）</n-h3>
          <div class="nbox1">
            <div>{{ cfg.api }}api/tj?type=get_iconteam</div>
          </div>
          <n-h3> 请求参数</n-h3>
          <div class="nbox1">
            <n-grid y-gap="0" :cols="4">
              <n-gi>
                <div style="text-align: center">属性</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">类型</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">必填</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">说明</div>
              </n-gi>
              <!-- -->
              <n-gi> type </n-gi>
              <n-gi> String </n-gi>
              <n-gi> 必填 </n-gi>
              <n-gi> </n-gi>
              <!-- -->
              <n-gi> season </n-gi>
              <n-gi> Int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>赛季ID 默认最新赛季</n-gi>
              <!-- -->
              <n-gi> 角色图标名称 </n-gi>
              <n-gi> String</n-gi>
              <n-gi>否</n-gi>
              <n-gi>例 idol_captain_myth.png</n-gi>
            </n-grid>
          </div>
        </div>
        <div v-else-if="cfg.route.params.type == 'rinbot_cd'">
          <n-h3 style="margin-top: 0">获取公会人员出刀图片</n-h3>
          <n-h3> 请求地址（GET）</n-h3>
          <div class="nbox1">
            <div>{{ cfg.api }}api/guild_data?type=get_rinbot_cd&pdtype=webtools</div>
          </div>
          <n-h3> 请求参数</n-h3>
          <div class="nbox1">
            <n-grid y-gap="0" :cols="4">
              <n-gi>
                <div style="text-align: center">属性</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">类型</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">必填</div>
              </n-gi>
              <n-gi>
                <div style="text-align: center">说明</div>
              </n-gi>
              <!-- -->
              <n-gi> type </n-gi>
              <n-gi> String </n-gi>
              <n-gi> 必填 </n-gi>
              <n-gi> 填写 get_rinbot_cd </n-gi>
              <!-- -->
              <n-gi> pdtype </n-gi>
              <n-gi> String </n-gi>
              <n-gi> 必填 </n-gi>
              <n-gi> 填写 webtools </n-gi>
              <!-- -->
              <n-gi> season </n-gi>
              <n-gi> int</n-gi>
              <n-gi>否</n-gi>
              <n-gi>赛季ID</n-gi>
              <!-- -->
              <n-gi> guild_name </n-gi>
              <n-gi> String</n-gi>
              <n-gi>必填</n-gi>
              <n-gi>公会名称</n-gi>
              <!-- -->
              <n-gi> user_name </n-gi>
              <n-gi> String</n-gi>
              <n-gi>必填</n-gi>
              <n-gi>人员名称 </n-gi>
            </n-grid>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.n-grid div {
  border: solid 1px #585858;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
export default defineComponent({
  setup() {
    const set = {
      ck: (ck) => {
        cfg.router.push({
          params: {
            type: ck,
          },
        });
      },
    };

    let val = reactive({});

    return {
      set,
      val,
      cfg,
    };
  },
});
</script>
